<template>
    <div>
        <el-container :style="{'height':screenHeight}">
            <el-header>Header</el-header>
            <el-main><router-view></router-view></el-main>
            <el-footer>Footer</el-footer>
        </el-container>

    </div>
</template>

<script>
export default {
    data() {
        return {
            screenHeight: document.documentElement.clientHeight + "px",
        };
    },
    methods: {},
};
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;  
  }
</style>